<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>医疗展示</title>
		<link href="./css/bootstrap.min.css" rel="stylesheet">
		<link href="./css/animate.min.css" rel="stylesheet">
		<link href="./css/style.css" rel="stylesheet">
		<style>
			.carousel-indicators li{
				width: 40px;
				height: 5px;
				background: #ccc;
			}
			.carousel-indicators li.active{
				width: 40px;
				height: 10px;
				background: url(img/switch.svg) no-repeat;
			}
			.container{
				border: 3px solid #333;
				padding-bottom: 30px;
			}
		</style>
	</head>

	<body>
		<!-- 服务团队 轮播 -->
		<div class="container">
			<div class="module_title">
				<h3>途欢优质的医疗服务团队</h3>
				<p class="line"></p>
			</div>
			<div class="switch_box switch_box_pc pc-none">
				<div class="row switch box_center">
					<div class="col-sm-8">
						<!--轮播图-->
						<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
						  <!-- Indicators -->
							<ol class="carousel-indicators">
								<li data-target="#carouselExampleControls" data-slide-to="0" class="active"></li>
								<li data-target="#carouselExampleControls" data-slide-to="1"></li>
								<li data-target="#carouselExampleControls" data-slide-to="2"></li>
								<li data-target="#carouselExampleControls" data-slide-to="3"></li>
							</ol>
						
							<!-- Wrapper for slides -->
						<div class="carousel-inner" role="listbox">
						    <div class="item active">
								<img src="img/img1.jpg" alt="...">
								<div class="carousel-caption">
								</div>
							</div>
						    <div class="item">
								<img src="img/img2.jpg" alt="...">
								<div class="carousel-caption">
								</div>
						    </div>
							<div class="item">
								<img src="img/img3.jpg" alt="...">
								<div class="carousel-caption">
								</div>
						   </div>
						   <div class="item">
								<img src="img/img4.jpg" alt="...">
								<div class="carousel-caption">
								</div>
						   </div>
						</div>
						
						  <!-- Controls -->
						<!-- <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						    <span class="sr-only">Previous</span>
						</a>
						<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
						    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						    <span class="sr-only">Next</span>
						</a> -->
					</div>
				</div>
						<!--右侧宣传栏 -->
						<div class="describe_box pc_describe col-sm-4">
							<div class="describe_module d-opacity">
								<span class="describe_img"><img src="./img/health-ico.png" alt=""></span>
								<h3>个人专属健康顾问</h3>
								<p>您与医生间的纽带工作者，拥有多年临床及健康管理工作经验，令您与医生的沟通更有质量，帮助您获得更精准的医疗服务</p>
							</div>
						<div class="describe_module ">
							<span class="describe_img">
								<img src="./img/person-ico.png" alt="">
							</span>
							<h3>医疗协调专员</h3>
							<p>您与家人的医疗服务协调顾问，拥有多年临床工作背景和分诊经验，给予您和家人必要的就医指导，帮助您选择适需的科室就医、获得专科医生线上预诊服务，或为您连接您所需的医疗服务</p>
						</div>
						<div class="describe_module ">
							<span class="describe_img">
								<img src="./img/home-ico.png" alt="">
							</span>
							<h3>途欢家庭医生</h3>
							<p>您与家人的健康守门人。解决您与家庭日常大多数的医疗需求及慢性疾病稳定期的治疗、随访与管理。在途欢健康管理平台与健康顾问支持下，协助您完成更精准，更有价值的诊疗</p>
						</div>
						<div class="describe_module ">
							<span class="describe_img">
								<img src="./img/th-ico.png" alt="">
							</span>
							<h3>途欢大夫</h3>
							<p>如您与家人患有慢性疾病，定期为您连接三甲医院专科医生，并评估指导您的诊疗方案。当家庭发生临床医疗需求，将为您推荐并连接最适宜的医生与专家，确保获得更优的医疗解决方案</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script>
	/* $("#carousel-example-generic").on("slide.bs.carousel",function(){
			//轮播刚开始
			//当前文字渐渐消失
			$(".pc_describe .describe_module")
			.addClass("animated fadeOutUp").removeClass("fadeInUp");
		})
		
		$("#carousel-example-generic").on("slide.bs.carousel",function(){
			//轮播完成文字出现
			$("#carouselExampleControls .carousel-inner .item").each(function(index, item) {
					
						})
						}) */
		
		$("#carouselExampleControls").on("slide.bs.carousel", function() {
				//右侧宣传栏（图片，标题，内容） 所有栏位都消失透明度1->0
				allFadeOut();
			});
		
			$("#carouselExampleControls").on("slid.bs.carousel", function() {
				//右侧宣传栏处于active的栏位 最外层盒子展示（透明度为1）
				switch2Active();
				//右侧宣传栏(图片，标题，内容) 所有栏位都出现透明度0->1
				allFadeIn();
			})
		
		
			function allFadeOut() {
				$(".pc_describe .describe_module")
					.addClass('animated fadeOutUp').removeClass("fadeInUp");
			}
		
			function allFadeIn() {
				$(".pc_describe .describe_module")
					.addClass('animated fadeInUp').removeClass("fadeOutUp");
			}
		
		
			function switch2Active() {
				//获得所有的轮播图父盒子
				$("#carouselExampleControls .carousel-inner .item").each(function(index, item) {
					//console.log(index,item);
					if ($(item).hasClass("active")) {
						topBox(index);
					}
				})
		
				function topBox(index) {
					$(".pc_describe .describe_module")
						.eq(index).addClass("d-opacity").siblings().removeClass("d-opacity");
				}
			}
		
		
			function switch2() {
				var $carouselExampleControls = $("#carouselExampleControls"); //获取轮播id
				var $items = $carouselExampleControls.children(".carousel-inner").children(".item");
				$items.each((index, item) => { //遍历所有轮播页   index下标  item当前页
					if ($(item).hasClass("active")) {
						//switch2IdApp(index);
						switch2IdPC(index);
					}
				})
				// 设置对应内容得显隐藏
			   function switch2IdApp(index) {
				       var $ali = $(".app_describe").children(".describe_module");
				       $ali.eq(index).addClass("d-opacity").siblings().removeClass("d-opacity");
				   } 
				 function switch2IdPC(index) {
					var $ali = $(".pc_describe").children(".describe_module");
					$ali.eq(index).addClass("d-opacity").siblings().removeClass("d-opacity");
				}
			}

</script>


